<template>
    <div class="app-container">
        <el-form>
            <el-form-item>
                <el-input v-model="searchKeyword" placeholder="请输入用户名" style="margin-bottom: 10px; width: 300px;"></el-input>
            </el-form-item>
            <el-button type="primary" @click="searchUsers">搜索</el-button>
        </el-form>
        <el-table :data="filteredUsers" style="width: 100%">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column prop="role" label="角色"></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
    const users = ref([]);
    const searchKeyword = ref('');
    // 在组件加载时获取用户数据
    onMounted(() => {
      fetchUserData(); // 调用获取用户数据的函数
    });
    async function fetchUserData() {
      try {
        const response = await fetch('/api/users'); // 发起后台请求获取用户数据
        const data = await response.json();
        users.value = data; // 将获取到的用户数据赋值给users变量
      } catch (error) {
        console.error('获取用户数据失败', error);
      }
    }
    // 计算属性，根据搜索关键字过滤用户数据
    const filteredUsers = computed(() => {
      return users.value.filter(user => user.name.includes(searchKeyword.value));
    });
    // 搜索按钮点击事件处理函数
    function searchUsers() {
      // 在这里可以进行搜索操作，例如发送搜索请求等
      console.log('搜索关键字:', searchKeyword.value);
    }
</script>
